﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="RK.Store.MetroSnake.UI.HelpPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RK.Store.MetroSnake.UI"
    xmlns:common="using:RK.Store.MetroSnake.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Style="{StaticResource LayoutRootStyle}"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- The background of this page -->
        <Rectangle
                Grid.RowSpan="2" Grid.ColumnSpan="2">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="#AABFBFBF" />
                    <GradientStop Offset="1" Color="#AA5B5B5B" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle
                Grid.RowSpan="1" Grid.ColumnSpan="2"
                Fill="#00CBFF" />

        <!-- Back button and page title -->
        <Grid Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" />
            <TextBlock x:Uid="HelpSubtitle" Grid.Column="1" Text="Help" Style="{StaticResource SubheaderTextStyle}" />
        </Grid>

        <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
            <ScrollViewer HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Disabled">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="500" />
                        <ColumnDefinition Width="500" />
                        <ColumnDefinition Width="500" />
                        <ColumnDefinition Width="500" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <!-- Some information about gaining points -->
                    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"
                                Grid.Column="0" Margin="40">
                        <TextBlock x:Uid="HelpPagePointHeader"
                                   TextWrapping="Wrap" Style="{StaticResource GroupHeaderTextStyle}" VerticalAlignment="Top" HorizontalAlignment="Left">
                        Points
                        </TextBlock>
                        <TextBlock x:Uid="HelpPagePointDescription"
                                   HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Style="{StaticResource BodyTextStyle}">
                        The game is about to gain as much points as possible.
                        Points are collected by eating the fruits (apple or banana) or the donut.
                        These items will bring you the following count of points.
                        </TextBlock>
                        <Grid Width="300">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="150" />
                                <ColumnDefinition Width="150" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="25" />
                                <RowDefinition Height="120" />
                                <RowDefinition Height="120" />
                                <RowDefinition Height="120" />
                            </Grid.RowDefinitions>

                            <Image Source="/Assets/Images/Banana.png"
                                   Grid.Column="0" Grid.Row="1" Width="128" />
                            <TextBlock FontSize="60"
                                       VerticalAlignment="Center" HorizontalAlignment="Center"
                                       Grid.Column="1" Grid.Row="1">+1</TextBlock>

                            <Image Source="/Assets/Images/Apple.png"
                                   Grid.Column="0" Grid.Row="2" Width="128" />
                            <TextBlock FontSize="60"
                                       VerticalAlignment="Center" HorizontalAlignment="Center"
                                       Grid.Column="1" Grid.Row="2">+2</TextBlock>

                            <Image Source="/Assets/Images/Donut.png"
                                   Grid.Column="0" Grid.Row="3" Width="128" />
                            <TextBlock FontSize="60"
                                       VerticalAlignment="Center" HorizontalAlignment="Center"
                                       Grid.Column="1" Grid.Row="3">+3</TextBlock>
                        </Grid>
                    </StackPanel>

                    <!-- Some information about touch control -->
                    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"
                                Grid.Column="1" Margin="40">
                        <TextBlock x:Uid="HelpPageTouchHeader"
                                   TextWrapping="Wrap" Style="{StaticResource GroupHeaderTextStyle}" VerticalAlignment="Top" HorizontalAlignment="Left">
                            Control using touch
                        </TextBlock>
                        <TextBlock x:Uid="HelpPageTouchDescription"
                                   HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Style="{StaticResource BodyTextStyle}">
                            This is the most easy way for touch enabled devices. Just touch the monitor and move your finger around.
                            The worm then moves in the direction you moved your finger.
                        </TextBlock>
                        <Image Source="/Assets/Images/TouchControl.png"
                               Width="300" Margin="0,30,0,0" />
                    </StackPanel>

                    <!-- Some information about keyboard control -->
                    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"
                                Grid.Column="2" Margin="40">
                        <TextBlock x:Uid="HelpPageKeyboardHeader"
                                   TextWrapping="Wrap" Style="{StaticResource GroupHeaderTextStyle}" VerticalAlignment="Top" HorizontalAlignment="Left">
                        Control using keyboard
                        </TextBlock>
                        <TextBlock x:Uid="HelpPageKeyboardDescription"
                                   HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Style="{StaticResource BodyTextStyle}">
                        This is the most easy way to control the snake if you've got a PC or a Laptop.
                        Just press the arrow keys or WASD, that's it.
                        </TextBlock>
                        <Image Source="/Assets/Images/WASDKeys.png"
                               Width="300" Margin="0,30,0,0" />
                        <Image Source="/Assets/Images/ArrowKeys.png"
                               Width="200" Margin="0,30,0,0" />
                    </StackPanel>
                </Grid>
            </ScrollViewer>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>